<template>
  <div class="order-item-wrapper">
    <div class="content">
      <img :src="item.url ? item.url : 'https://img.bzhz.jnbygroup.com/cloth.png'" class="order-img" @click="open(item)" />
      <div class="text">
        <p class="order-num">
          <a-tag color="blue" style="margin-bottom: 0;">
            <template v-if="item.orderStatus == 0 || item.orderStatus == 1">待付款</template>
            <template v-if="item.orderStatus == 2">待发货</template>
            <template v-if="item.orderStatus == 3">待发货</template>
            <template v-if="item.orderStatus == 4 || item.orderStatus == 5">待收货</template>
            <template v-if="item.orderStatus == 7">待评价</template>
            <template v-if="item.orderStatus == 8">已完成</template>
            <template v-if="item.orderStatus == 9">已取消</template>
          </a-tag>
          订单编号：{{ item.orderCode }}
        </p>
        <p class="num-price">共{{ item.goodsNumber }}件，实付 ¥{{ item.price }}</p>
        <p class="time">下单时间： {{ item.orderTime }}</p>
      </div>
    </div>
    <div class="btn-wrapper">
      <!-- <a-button>订单详情</a-button> -->
      <a-popconfirm
        title="确认发送订单给顾客?"
        @confirm="confirm"
      >
        <a-button type="primary" style="margin-left: 5px;">发送</a-button>
      </a-popconfirm>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
  },
  data() {
    return {
    }
  },
  watch: {
  },
  computed:{
  },
  methods: {
    confirm() {
      this.$emit('sendOrderCard', this.item)
    }
  }
}
</script>
<style lang="less" scoped>
.content{
  display: flex;
  .order-num{
    margin-bottom: 0px;
  }
  .num-price{
    margin-bottom: 0px;
  }
  .time{
    margin-bottom: 0px;
    color: #999;
  }
  .order-img{
    width: 64px;
    height: 64px;
    object-fit: scale-down;
    border: 1px dashed #cdcdcd;
    margin-right: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 4px;
  }
  .text{
    flex: 1;
  }
}
.btn-wrapper{
  display: flex;
  justify-content: flex-end;
}
</style>
